<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Cache-Control" content="no-transform">
		<meta name="format-detection" content="telephone=no">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="style/css/basic.css" />
		<link rel="stylesheet" href="style/css/cart.css" />
		<script type="text/javascript" src="style/plugin/mui/js/mui.min.js"></script>
		<script type="text/javascript" src="style/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="style/mockjs/dist/mock.js"></script>
		<script type="text/javascript" src="style/js/vue.min.js"></script>
		<script type="text/javascript" src="style/js/vue-resource.js"></script>
		<script type="text/javascript" src="style/js/basic.js"></script>
	</head>

	<body>
		<div>
			<div id="header">
				<h1>购物车</h1>
				<span class="backicon"></span>
			</div>
			<div class="body" id="cartBox">
				<!--<div class="order">
					<div class="check">
						<div class="choice" data="0"></div>
					</div>
					<img src="style/img/product.png" class="pro_pic">
					<div class="content">
						<span class="name">金种子酒 和泰苦荞酒40度418mL配制白酒粮食酒 礼盒装 单瓶装</span>
						<span class="score">价格：￥<strong class="pri">158.00</strong></span>
						<div class="count">
							<span class="min">-</span>
							<input class="num" value="1">
							<span class="plus">+</span>
						</div>
					</div>
					<div class="priceinfo">
						<img src="style/img/del.png" class="del">
					</div>
				</div>-->
			</div>
			<div class="exchange maxwidth">
				<a href="javascript:void(0);" class="shopping_cart">
					<span class="check" id="allchoice" data="0"></span> 全选
	
				</a>
				<a href="javascript:void(0);" class="total_intergral">合计：<srong class="score total">¥158.00</strong></a>
				<a href="javascript:;" class="exchange_btn">去结算<em class="total_count"></em></a>
			</div>
		</div>
	</body>
	<script type="text/javascript">
            mui.plusReady(function(){
            	var arr=[];
				var obj={};
				var arr2=[];
				var obj2={};
				var ticket=localStorage.getItem("tick")
                var sign=localStorage.getItem("sig")
                localStorage.setItem("cart",0)
            	totalprice();
				$(document).on("click",".min",function() {
					var minnum = $(this).next().val()
					minnum--
					console.log($(this).next().val())
					if($(this).next().val() == 1) {
						$(this).next().val() == 1
						return;
					}
					$(this).next().val(minnum)
					var attrdate = $(".choice").attr("data");
					if(attrdate == 1) {
						totalprice();
					}
	
				})
	
				$(document).on("click",".plus",function() {
					var plusnum = $(this).prev().val();
					plusnum++;
					$(this).prev().val(plusnum)
	
					totalprice();
				})
				$(document).on("click",".del",function() {
					$(this).parent().parent().remove();
					totalprice();
					var gaI=$(this).attr("name")
					mui.ajax(domain+"/cart/delete?t="+ticket+"&sign="+sign,{    
						data:{
							good_no:gaI,
							type:1
						},
				    	dataType:"json", 
				    	type:"post",
				    	timeout:10000,
				    	//headers:{'Content-Type':'application/json'},
				    	success:function(data){
				    		console.log(data)   
				    		var data=data.data;	  
				    		if(data.code==1){  
				    			console.log(data.msg) 
				    		}else if(data.code==0){ 
				    			console.log("未连接")    
				    		}
				    	},
				    	error:function(xhr,type,errorThrown){
				    		console.log(errorThrown)      
				    	}
				    })
				})
				$(document).on("click",".choice",function() {
					var attrdata = $(this).attr("data");
					var valn = $(this).parent().next().next().find(".num").val();
					var goodno=$(this).attr("name");
					var title=$(this).attr("data-title")
					var pri=$(this).attr("data-price")
					if(attrdata == 0) {
						$(this).css("background-image", "url(style/img/checkbox_checked.png)")
						$(this).attr("data", 1)
					} else {
						$(this).css("background-image", "url(style/img/checkbox_no.png)")
						$(this).attr("data", 0)
						$("#allchoice").css("background-image", "url(style/img/checkbox_no.png)")
						$("#allchoice").attr("data", 0)
					}
					totalprice(); 
				})
				$(document).on("click","#allchoice",function() {
					var attrdata = $(this).attr("data");
					if(attrdata == 0) {
						$(".choice").attr("data", 1);
						$(this).css("background-image", "url(style/img/checkbox_checked.png)");
						$(".choice").css("background-image", "url(style/img/checkbox_checked.png)");
						$(this).attr("data", 1);				
						
					} else {
						arr=[]
						arr2=[]
						$(".choice").attr("data", 0);
						$(this).css("background-image", "url(style/img/checkbox_no.png)");
						$(".choice").css("background-image", "url(style/img/checkbox_no.png)");
						$(this).attr("data", 0);
						
					}
					totalprice();
				})
	         
				function totalprice() {
					var num = 0;
					var count = 0;
					
					$(".choice").each(function(idx) {
						if($(this).attr("data") == 1) {
							var valnum = $(this).parent().next().next().find(".num").val();
							var prices = $(this).parent().next().next().find(".pri").text();
							
							count += parseInt(valnum);						
							num += valnum * prices;
							
						}
					})
					$(".total_count").html("("+count+"件)")
					$('.total').html("¥"+num);
					
				}
				var cartBox=document.getElementById("cartBox")
				var exchangeBtn=document.getElementsByClassName("exchange_btn")[0]
				exchangeBtn.addEventListener("tap",function(){
                    if($("div[data=1]")){
                    	for(var i=0;i<$("div[data=1]").length;i++){
	                    	obj.good_no=$("div[data=1]").eq(i).attr("name")
						    obj.num=$("div[data=1]").eq(i).parent().next().next().find(".num").val();
						    obj2.title=$("div[data=1]").eq(i).attr("data-title")
						    obj2.price=$("div[data=1]").eq(i).attr("data-price")
						    obj2.img=$("div[data=1]").eq(i).parent().next().attr("src")
						    obj2.num=$("div[data=1]").eq(i).parent().next().next().find(".num").val()
						    arr.push(obj)
						    arr2.push(obj2)
						    obj={}
						    obj2={}
	                    } 
	                   
                    }
                     console.log(arr,arr2)
                    arr= JSON.stringify(arr)
                    arr2=JSON.stringify(arr2)
                    console.log(arr)
                    localStorage.setItem("canshu",arr)
//                  console.log(localStorage.getItem("canshu"))
                    localStorage.setItem("goodmsg",arr2)
                    if(arr!="[]"){
                    	openurl_can("settle",1)
                    }else{
                    	mui.toast("请选择商品")  
                    }
                   arr=[]
                   arr2=[]
                    
                  
				})
				mui.ajax(domain+"/cart/getList?t="+ticket+"&sign="+sign,{ 
					data:{
						page:1,
						page_size:7,
						type:1
					},
			    	dataType:"json", 
			    	type:"post", 
			    	timeout:10000,
			    	headers:{'Content-Type':'application/json'},
			    	success:function(data){      
			    		if(data.code==1){
			    		    var data=data.data.list;         
				    		var html=""; 
				    		for(var p of data){ 
				    			html+=`
						    		<div class="order">
										<div class="check">
											<div class="choice" data="0" data-id="${p.id}" name="${p.good_no}" data-title="${p.good_info.title}" data-price="${p.good_info.price}"></div>
										</div>
										<img src="${domain2+p.good_info.thumb_pic}" class="pro_pic">
										<div class="content">
											<span class="name">${p.good_info.title}</span>
											<span class="score">价格：￥<strong class="pri">${p.good_info.price}</strong></span>
											<div class="count" id="${p.id}" name="${p.good_no}">
												<span class="min">-</span>
												<input class="num" value="${p.num}" readonly="readonly">
												<span class="plus">+</span>
											</div>
										</div>
										<div class="priceinfo">
											<img src="style/img/del.png" class="del" name="${p.good_no}" data-title="${p.good_info.title}" data-price="${p.good_info.price}">
										</div>
									</div>`
				    		}
				    		cartBox.innerHTML=html 
			    		}  
			    	},
			    	error:function(xhr,type,errorThrown){
			    		console.log(type)           
			    	} 
			  }) 

			})  

	</script>

</html>